/**
 * 声明一个新的组件对象，标签选择器为 comp-nav-tab
 * @param template HTML页面元素结构
 * @param style CSS样式
 * @param script 函数
 */
let compNavTab = {
    selector: "comp-nav-tab",
    template:`
    <div style="display:flex;position: fixed;bottom: 0px;width:100vw;height:100px;">
        <div style="flex:1;text-align: center;" onclick="router('./page-home.html')">首页</div>
        <div style="flex:1;text-align: center;" onclick="router('./page-travel.html')">去旅游</div>
        <div style="flex:1;text-align: center;" onclick="router('./page-my.html')">我的</div>
    </div>`,
    style:  ``,
    script:`
    <script>
        function router(path){
            location.href = path
        }
    </script>
    `
}

let compNavTitle = {
    selector: "comp-nav-title",
    template:`<h1>顶部导航条</h1>`,
    style:  ``,
    script:``
}

/**
 * 声明当前模块，包含的组件列表
 * 将compNavTab添加到模块组件列表中
 */
let ModuleComponents = []
ModuleComponents.push(compNavTab)
ModuleComponents.push(compNavTitle)


/**
 * 循环模块组件列表，逐个用dom渲染出来
 */
ModuleComponents.forEach(comp => {
    
let navTabList = document.getElementsByTagName(comp.selector);
    for (let index = 0; index < navTabList.length; index++) {
        let el = navTabList[index];
        el.innerHTML = comp.template + comp.style;
        document.write(comp.script);
    }
});
